<template>
<a-timeline style="margin-top: 30px">
                <a-timeline-item
                  >
                  <template #dot>
                    <svg
                      class="icon"
                      aria-hidden="true"
                      style="
                        font-size: 25px;
                        display: inline;
                      "
                    >
                      <use xlink:href="#icon-tejiajipiaobiaoqian"></use>
                    </svg>
                  </template>
                  <b>开放订票: </b>{{ flightInfo.startBook }}</a-timeline-item
                >
                <a-timeline-item color="red"
                  ><b>结束订票: </b>{{ flightInfo.endBook }}</a-timeline-item
                >
                <a-timeline-item color="green" position="right">
                  <template #dot>
                    <SendOutlined style="font-size: 16px" />
                  </template>
                  {{ flightInfo.deployCity }}</a-timeline-item
                >
                <a-timeline-item>
                  <template #dot>
                    <svg
                      class="icon"
                      aria-hidden="true"
                      style="
                        font-size: 25px;
                        display: inline;
                      "
                    >
                      <use xlink:href="#icon-feiji_qifei"></use>
                    </svg>
                  </template>
                  <b>预计起飞时间: </b
                  >{{ flightInfo.startTime }}</a-timeline-item
                >
                <a-timeline-item
                  >
                  <template #dot>
                    <svg
                      class="icon"
                      aria-hidden="true"
                      style="
                        font-size: 25px;
                        display: inline;
                      "
                    >
                      <use xlink:href="#icon-feiji_jiangla"></use>
                    </svg>
                  </template>
                  <b>预计降落时间: </b
                  >{{ flightInfo.endTime }}</a-timeline-item
                >
                <a-timeline-item position="right" color="green">
                  <template #dot>
                    <SendOutlined style="font-size: 16px" />
                  </template>
                  {{ flightInfo.arrivalCity }}</a-timeline-item
                >
              </a-timeline>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { SendOutlined } from "@ant-design/icons-vue"
import { FlightInfo } from '../api/flightApi';

const props = defineProps(["flightInfo"])

const flightInfo = ref<FlightInfo>(props.flightInfo)
</script>